<template>
	<view class="page">
		<view class="head-tabs">
			<view class="head-box flex align-center">
				<view :class="['item-tab', tabsIndex == index ? 'item-tab-active':'']" v-for="(item, index) in tabsArr" :key="item.id" @click="tabsIndex = index">
					<text>{{ item.name }}</text>
					<view v-if="tabsIndex == index" class="btm-border"></view>
				</view>
			</view>
		</view>
		
		<view class="code-content">
			<view class="code-img"><image :src="url + '/api/install_pile/landlordCode'"></image></view>
			<view class="code-desc flex align-center">
				<image src="/static/images/ts.png"></image>
				<text>扫码确认之后转为房东角色</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { url } from "../../utils/url.js"
	export default {
		data() {
			return {
				tabsArr: [{id: 1, name: '房东码'}],
				tabsIndex: 0,
				
				url: url
			}
		},
		methods: {
		
		}
	}
</script>

<style scoped>
.head-tabs {
	width: 100%;
	box-sizing: border-box;
	padding: 0 70rpx;
	background-color: white;
}
.head-box {
	width: 100%;
	height: 100%;
}
.item-tab {
	padding: 26rpx 0;
	margin-right: 60rpx;
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
	position: relative;
}
.head-box .item-tab-active {
	font-weight: bold !important;
	color: #49C265 !important;
}
.btm-border {
	width: 36rpx;
	height: 8rpx;
	background: #49C265;
	border-radius: 4rpx;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.code-content {
	padding: 73rpx 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.code-img {
	width: 476rpx;
	height: 476rpx;
	margin-bottom: 47rpx;
	padding: 10rpx;
	box-sizing: border-box;
}
.code-img image {
	width: 100%;
	height: 100%;
}
.code-desc image {
	width: 28rpx;
	height: 29rpx;
	margin-right: 10rpx;
}
.code-desc text {
	color: #666666;
	font-size: 28rpx;
	font-weight: 500;
}
</style>
